<template>
  <div>
    <el-card style="height: calc(100vh - 100px)">
      <el-row :gutter="20">
        <el-col :span="6">
          <span class="addCustomerText">{{ customerCid ? '编辑客户' : '新增客户' }}</span>
        </el-col>
        <el-col :span="18">
          <el-row type="flex" justify="end">
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button @click="goaback">返回</el-button>
          </el-row>
        </el-col>
      </el-row>

      <!-- <el-row>
        <el-steps :active="active" style="margin-top: 20px" align-center space="70%">
          <el-step title="客户信息" />
          <el-step title="地址信息" v-if="customerCid" />
          <el-step title="开票信息" v-if="customerCid" />
        </el-steps>
      </el-row> -->

      <!-- 客户信息 -->
      <div>
        <!-- 客户信息填写 -->
        <el-form ref="customerFormRef" :model="customerForm" :rules="customerFormRules" label-width="120px"
          style="margin-top: 20px">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="客户编码: ">
                <el-input v-model="customerForm.customer_code" placeholder="" disabled />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="客户名称: " prop="customer_name">
                <el-input v-model="customerForm.customer_name" placeholder="请输入客户名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="国家: " prop="customer_country">
                <el-input v-model="customerForm.customer_country" placeholder="请输入国家" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="来源: " prop="customer_origin">
                <el-input v-model="customerForm.customer_origin" placeholder="请输入来源" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="旺旺/客户ID: " prop="customer_id">
                <el-input v-model="customerForm.customer_id" placeholder="请输入旺旺" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="邮箱: " prop="customer_email">
                <el-input v-model="customerForm.customer_email" placeholder="请输入邮箱" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 联系方式 -->
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="联系方式">
                <template #default="{ row }">
                  <el-row :gutter="20" style="margin-top: 30px">
                    <el-col :span="7">
                      <el-form-item label="手机">
                        <el-input v-model="customerForm.customer_contact_ways.phone" placeholder="请输入手机" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="微信">
                        <el-input v-model="customerForm.customer_contact_ways.wechat" placeholder="请输入微信" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="WhatsApp">
                        <el-input v-model="customerForm.customer_contact_ways.whatsApp" placeholder="请输入WhatsApp" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row :gutter="20" style="margin-top: 20px; margin-left: 5px">
                    <el-col :span="7">
                      <el-form-item label="座机">
                        <el-input v-model="customerForm.customer_contact_ways.call" placeholder="请输入座机" />
                      </el-form-item>
                    </el-col>
                    <el-col :span="7">
                      <el-form-item label="QQ">
                        <el-input v-model="customerForm.customer_contact_ways.qq" placeholder="请输入QQ" />
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="主要沟通方式" prop="customer_main_chat_ways">
            <el-checkbox-group v-model="customerForm.customer_main_chat_ways">
              <el-checkbox label="1">邮箱</el-checkbox>
              <el-checkbox label="2">手机</el-checkbox>
              <el-checkbox label="3">微信</el-checkbox>
              <el-checkbox label="4">WhatsApp</el-checkbox>
              <el-checkbox label="5">座机</el-checkbox>
              <el-checkbox label="6">QQ</el-checkbox>
              <el-checkbox label="7">平台账号</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="跟进转态" prop="customer_flow_up_status">
                <el-select v-model="customerForm.customer_flow_up_status" placeholder="请选择跟进状态">
                  <el-option label="客户比价中" value="1" />
                  <el-option label="客户觉得物流贵" value="2" />
                  <el-option label="报价后客户未读未回" value="3" />
                  <el-option label="报价后客户已读不回" value="4" />
                  <el-option label="客户暂无设计图纸" value="5" />
                  <el-option label="客户未提供报价信息" value="6" />
                  <el-option label="自定义" value="7" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="公司名称: " prop="customer_company_name">
                <el-input v-model="customerForm.customer_company_name" placeholder="请输入公司名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="公司官网: ">
                <el-input v-model="customerForm.customer_company_site" placeholder="请输入公司官网" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-input v-model="customerForm.customer_flow_up_mark" placeholder="请输入跟进状态详情" type="textarea" />
          </el-form-item>
          <el-form-item label="备注信息">
            <el-input v-model="customerForm.customer_mark_msg" placeholder="请输入备注信息" type="textarea" />
          </el-form-item>
        </el-form>
      </div>

      <!-- 地址信息 -->
      <div v-show="active === 2 ? true : false">
        <!-- 地址信息填写 -->
        <el-form :model="invoiceInfoForm" label-width="120px" style="margin-top: 20px">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="国家: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入国家" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="邮政编码: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceCode" placeholder="请输入邮政编码" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="收件人: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入收件人" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="联系电话: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceCode" placeholder="请输入联系电话" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="联系邮箱: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入联系邮箱" />
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="详细地址: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入详细地址" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary">保存地址信息</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 地址信息表格table -->
        <el-table border :data="invoiceInfoTabelData" :header-cell-style="{ background: '#DCDFE6', color: '#606266' }">
          <el-table-column label="国家" prop="invoiceName" align="center" />
          <el-table-column label="邮政编码" prop="invoiceCode" align="center" />
          <el-table-column label="收件人" prop="invoiceName" align="center" />
          <el-table-column label="联系电话" prop="invoiceCode" align="center" />
          <el-table-column label="详细地址" prop="invoiceName" align="center" />
          <el-table-column label="联系邮箱" prop="invoiceName" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button size="mini">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 开票信息 -->
      <div v-show="active === 3 ? true : false">
        <!-- 开票信息填写 -->
        <el-form :model="invoiceInfoForm" label-width="120px" style="margin-top: 20px">
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="开票名称: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入开票名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="组织信用代码: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceCode" placeholder="请输入组织信用代码" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="账户名称: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入账户名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="开户行名称: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceCode" placeholder="请输入开户行名称" />
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="银行账号: " prop="invoiceName">
                <el-input v-model="invoiceInfoForm.invoiceName" placeholder="请输入银行账号" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary">保存开票信息</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>

        <!-- 开票信息表格table -->
        <el-table border :data="invoiceInfoTabelData" :header-cell-style="{ background: '#DCDFE6', color: '#606266' }">
          <el-table-column label="开票名称" prop="invoiceName" align="center" />
          <el-table-column label="组织信用代码" prop="invoiceCode" align="center" />
          <el-table-column label="账户名称" prop="invoiceName" align="center" />
          <el-table-column label="开户名称" prop="invoiceCode" align="center" />
          <el-table-column label="银行账号" prop="invoiceName" align="center" />
          <el-table-column label="操作" align="center">
            <template #default="{ row }">
              <el-button size="mini" type="">编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { addCustomerAPI, getCustomerDetailAPI, editCustomerAPI } from '@/api/customer'
export default {
  props: {
    customerCid: {
      // type: Number,
      required: true
    }
  },
  data() {
    return {
      chatType: '',
      active: 1, // steps选中
      invoiceInfoForm: { invoiceName: '' },
      customerForm: {
        customer_name: '',
        customer_country: '',
        customer_origin: '',
        customer_id: '',
        customer_email: '',
        customer_contact_ways: {
          phone: '',
          wechat: '',
          whatsApp: '',
          call: '',
          qq: ''
        },
        customer_flow_up_mark: '',
        customer_main_chat_ways: [],
        customer_flow_up_status: '',
        customer_company_name: '',
        customer_company_site: '',
        customer_mark_msg: ''
      },
      customerFormRules: {
        customer_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_country: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_origin: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_id: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_email: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_main_chat_ways: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_flow_up_status: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ],
        customer_company_name: [
          { required: true, message: '此项必填!', trigger: ['change', 'blur'] }
        ]
      },
      invoiceInfoTabelData: [
        {
          invoiceName: '霜霜',
          invoiceCode: '1001'
        },
        {
          invoiceName: '霜霜',
          invoiceCode: '1001'
        },
        {
          invoiceName: '霜霜',
          invoiceCode: '1001'
        }
      ]
    }
  },
  mounted() {
    if (this.customerCid) {
      this.getCustomerDetail(this.customerCid)
    }
  },
  methods: {
    async getCustomerDetail(customerCid) {
      const res = await getCustomerDetailAPI(customerCid)
      console.log(res);
      res.data.customer_main_chat_ways = res.data.customer_main_chat_ways.split(',')
      this.customerForm = res.data
    },
    // 上一步
    prevSteps() {
      this.active--
    },

    // 下一步
    nextSteps() {
      if (this.active++ > 2) this.active = 0
    },

    // 点击返回
    goaback() {
      this.$emit('goback')
      this.$refs.customerFormRef.resetFields()
    },

    // 保存
    async handleSave() {
      this.$refs.customerFormRef.validate(async (valid) => {
        if (valid) {
          try {
            console.log('active', this.active);
            this.customerForm.customer_main_chat_ways =
              this.customerForm.customer_main_chat_ways.join(',')
            let res
            if (this.customerCid) {
              // 编辑
              res = await editCustomerAPI(this.customerForm)
            } else {
              // 新增
              res = await addCustomerAPI(this.customerForm)
            }
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.goaback()
              this.$emit('updateList')
            }
            //#region 
            // // 选中第一步
            // if (this.active === 1) {
            //   const res = await addCustomerAPI(this.customerForm)
            //   console.log(res);
            //   if (res.code === 200) {
            //     this.$message.success('操作成功')
            //     this.$forceUpdate()
            //     this.getCustomerDetail(res.data.customer_cid)
            //   }
            //   return
            // }
            // // 选中第二步
            // if (this.active === 2) {
            //   console.log('this.customer_cid', this.customer_cid);
            //   if (this.customer_cid) {

            //   }
            //   console.log('触发了');
            //   // const res = await addCustomerAPI(this.customerForm)
            //   // if (res.code === 200) {
            //   //   this.$message.success('操作成功')
            //   //   this.goaback()
            //   //   this.$emit('updateList')
            //   // }
            //   // return
            // }
            //#endregion
          } catch (error) { }
        } else {
          this.$message.error('有必填项未填写!!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.addCustomerText {
  color: #1ecba3;
  font-size: 22px;
}
</style>
